<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="description"content="{{site.description}}">
    <meta name="keywords" content="{{site.keywords}}"/>
    <meta property="og:title" content="{{site.title}}" />
    <meta property="og:description" content="{{site.description}}" />
    <title>{{site.title}}-{{site.name}}</title>
    {{include './common/meta.html'}}
</head>

<body>

    <!-- 头部 -->
    {{include './common/header.html'}}

    <!-- 头条文章 -->
    <main class="bg-f2f2f2 pt-10 pb-20 flex">
        <div class="main center mt-10 flex gap-20">
            <!-- 最新文章 -->
            <article class="article-index">
                <section class="flex flex-wrap justify-between gap-10  mb-20" >
                    {{ if banner&&banner.length>0}}
                    <div class="swiper mySwiper">
                        <div class="swiper-wrapper">
                            {{each banner}}
                            <div class="swiper-slide">
                                <a href="{{$value.linkUrl}}" title="{{$value.title}}">
                                    <img src="{{$value.imgUrl}}" title="{{$value.title}}" alt="{{$value.title}}">
                                </a>
                            </div>
                            {{/each}}
                        </div>
                        <div class="swiper-pagination"></div>
                        <div class="swiper-button-next"></div>
                        <div class="swiper-button-prev"></div>
                        </div>
                    {{/if}}
                        
                    <div class="w-520 h-290 bg-fff pd-20">
                        {{ if topnews}}
                        {{if topnews.top}}
                        <div class="flex justify-between">
                            <h2 class="f-16 ellips-2 c-1a1a1a">{{topnews.top.title}}</h2>
                            <p class="f-14  ellips-3  mb-10 mt-10">
                                {{topnews.top.description}}<a class="c-003a8c"
                                    href="{{topnews.top.path}}/article-{{topnews.top.id}}.html"
                                    title="{{topnews.top.title}}">详情</a>
                            </p>
                        </div>
                        {{/if}}
                        <ul class="w-460-list">
                            {{each topnews.news}}
                            <li class="f-14 pt-4 pb-4 flex justify-between">
                                <a href="{{$value.path}}/article-{{$value.id}}.html"
                                    title="{{$value.title}}">{{$value.title}}</a>
                                <time class="c-999">{{$value.createdAt}}</time>
                            </li>
                            {{/each}}
                        </ul>
                        {{/if}}
                    </div>
                   
                </section>
                <section class="flex flex-wrap justify-between gap-10">
                    {{each article}}
                    <div class="w-460 bg-fff pd-20">
                        <h3 class="m-title f-16 flex justify-between border-dashed mb-10">{{$value.category.name}}<span
                                class="more"><a href="{{$value.category.path}}/index.html">更多</a></span></h3>
                        {{if $value.top.title}}
                        <figure class="flex justify-between">
                            <div class="thumb-120">
                                <img class="w-p100" src="{{$value.top.img}}" alt="{{$value.top.title}}" title="{{$value.top.title}}">
                            </div>
                            <div class="flex-1">
                                <figcaption class="f-14 ellips-2 bold mb-4">{{$value.top.title}}</figcaption>
                                <p class="f-13 ellips-3">
                                    {{$value.top.description}}
                                    <a href="{{$value.top.path}}/{{$value.top.id}}.html"
                                        title="{{$value.top.title}}">详情</a>
                                </p>
                            </div>
                        </figure>
                        {{/if}}

                        {{if $value.list&&$value.list.length>0}}
                        <ul class="w-460-list mt-16">
                            {{each $value.list}}
                            <li class="f-14 pt-4 pb-4 flex justify-between"><a
                                    href="{{$value.path}}/article-{{$value.id}}.html" {{$value.title}}>{{$value.title}}</a><time
                                    class="c-999">{{$value.createdAt}}</time></li>
                            {{/each}}
                        </ul>
                        {{/if}}

                        {{if $value.tags&&$value.tags.length>0}}
                        <p class="mt-10 flex">
                            {{each $value.tags}}
                            <a class="el-tag mr-5" href="/tags/{{$value.name}}.html">{{$value.name}}</a>
                            {{/each}}
                        </p>
                        {{/if}}
                    </div>
                    {{/each}}
                </section>
                {{if imgs.length>0}}
                <!-- 书籍/图片/视频 pdf -->
                <section class="mt-10">
                    <h3 class="m-title title-dashed f-16 flex justify-between">最新图文<span class="more">new</span></h3>
                    <div class="flex gap-2 flex-wrap">
                        {{each imgs}}
                        <figure class="books-item  f-14  pd-16 bg-fff">
                            <a class="m-img" href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">
                                <img src="{{$value.img}}" alt="{{$value.title}}" /></a>
                            <figcaption class="mt-6 mb-6">
                                <a href="{{$value.path}}/article-{{$value.id}}.html"
                                    title="{{$value.title}}">{{$value.title}}</a>
                            </figcaption>
                        </figure>
                        {{/each}}
                    </div>
                </section>
                {{/if}}
            </article>

            <aside class="flex-1">
                <!-- 介绍文本 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    {{@ frag["chancms"]}}
                </section>

                <!-- 通知 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 flex justify-between">推荐文章<span class="more">HOT</span>
                    </h3>
                    <ul class="mt-10">
                        {{each recommend}}
                        <li class="f-14 pt-4 pb-4 flex justify-between">
                            <a href="{{$value.path}}/article-{{$value.id}}.html"
                                title="{{$value.title}}">「荐」{{$value.title}}</a>
                        </li>
                        {{/each}}
                    </ul>
                </section>

                <!-- tag标签 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 flex justify-between">tag标签</h3>
                    <p class="mt-10">
                        {{each tag}}
                        <a class="el-tag mr-5 mb-5" href="/tags/{{$value.name}}.html">{{$value.name}}</a>
                        {{/each}}
                    </p>
                </section>

                <!-- 友情链接 -->
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 flex justify-between">友情链接</h3>
                    <p class="mt-10">
                        {{each friendlink.list}}
                        <a class="el-tag mr-5 mb-5" href="{{$value.link}}">{{$value.title}}</a>
                        {{/each}}
                    </p>
                </section>

                {{if recommendImgs.length>0}}
                <section class="notices pd-20 mb-20 bg-fff">
                    <h3 class="m-title border-dashed f-16 flex justify-between">推荐图文</h3>
                    {{each recommendImgs}}
                    <figure class="flex justify-between mt-10 border-dashed">
                        <div class="thumb mb-10"><img class="w-p100" src="{{$value.img}}" alt="{{$value.title}}" title="{{$value.title}}"></div>
                        <div class="flex-1  mb-20">
                            <figcaption class="f-14 ellips-2 bold mt-4 mb-4">{{$value.title}}</figcaption>
                            <p class="f-13 ellips-3">
                                {{$value.description}}
                                <a href="{{$value.path}}/article-{{$value.id}}.html" title="{{$value.title}}">详情</a>
                            </p>
                        </div>
                    </figure>
                    {{/each}}
                </section>
                {{/if}}
            </aside>
        </div>
    </main>

    <!-- footer -->
    {{include './common/footer.html'}}
    
    <!-- 移动端导航 -->
    {{include './common/wap-nav.html'}}

    <div class="api ignore mb-20 mt-20 pd-20 bg-f2f2f2">
        <h1>ChanCMS 当前页面数据：</h1>
        <p class="mb-20">site-> {{site}} </p>
        <p class="mb-20">frag-> {{frag}} </p>
        <p class="mb-20">banner->  {{banner}}</p>
        <p class="mb-20">site-> {{site}} </p>
        <p class="mb-20">111-->{{site.json.siteSubtitle}}</p>
        <p class="mb-20">nav-> {{nav}} </p>
        <p class="mb-20">category-> {{category}}</p>
        <p class="mb-20">friendlink-> {{friendlink}}</p>
        <p class="mb-20">baseUrl-> {{baseUrl}}</p>
        <p class="mb-20">tag--->{{tag}}</p>
        <p class="mb-20">slide--->{{slide}}</p>
        <p class="mb-20">topnews--->{{topnews}}</p>
        <p class="mb-20">article--->{{article}}</p>
        <p class="mb-20">imgs--->{{imgs}}</p>
        <p class="mb-20">recommendImgs--->{{recommendImgs}}</p>
    </div>
    
    {{include './common/js.html'}}
    
</body>

</html>